<template>
  <Layout :style="layoutStyle" class="h-flow-list-selector">
    <LayoutHeader class="h-flow-list-selector-header">
      <Input allowClear v-model="searchText" placeholder="请输入变量名称" icon/>
    </LayoutHeader>
    <LayoutBody>
      <div v-for="item in searchedDataSource" @dblclick="(e) => dbselect(item, e)"
           @click="(e) => select(item, e)" :key="item.variableName"
           :class="['f-flow-list-selector', {
              'f-flow-list-selected': item.selected && !item.blur,
              'f-flow-list-blur': item.selected && item.blur
            }]">
        {{ item.variableTitle }}
      </div>
    </LayoutBody>
  </Layout>
</template>
<script>
import Layout from '@/components/flow/layout/Layout.vue';
import LayoutHeader from '@/components/flow/layout/LayoutHeader.vue';
import LayoutBody from '@/components/flow/layout/LayoutBody.vue';
import {Input} from 'ant-design-vue';

export default {
  name: "ListSelector",
  components: {LayoutBody, LayoutHeader, Layout, Input: Input.Search},
  props: {
    height: {
      type: String,
      default: '100%'
    },
    dataSource: {
      type: Array,
      default: () => [],
    }
  },
  data() {
    return {
      searchedDataSource: undefined,
      searchText: undefined,
      selected: undefined
    };
  },
  mounted() {
    document.addEventListener('click', this.documentClick);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.documentClick);
  },
  methods: {
    documentClick() {
      if (this.selected) {
        this.selected.blur = true;
        this.searchedDataSource.splice(0, 0);
      }
    },
    search() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        if (!this.searchText || this.searchText === '') {
          this.searchedDataSource = [...this.dataSource];
          return;
        }
        this.searchedDataSource = this.dataSource.filter(item => (item.variableTitle + '').indexOf(this.searchText) !== -1);
      }, 200);
    },
    dbselect(item, e) {
      this.$emit('dbselect', item);
    },
    select(item, e) {
      (this.dataSource || []).forEach(item => (item.selected = false) || (item.blur = false));
      item.blur = false;
      item.selected = true;
      (this.searchedDataSource || []).splice(0, 0);
      e.stopPropagation();
      this.selected = item;
      this.$emit('select', item);
    },
  },
  computed: {
    layoutStyle() {
      return {
        height: this.height,
      };
    },
  },
  watch: {
    searchText: {
      handler() {
        this.search();
      },
      immediate: true,
    },
    dataSource: {
      handler() {
        this.search();
      },
      immediate: true,
    },
  }
};
</script>
<style>
.h-flow-list-selector {
  border: 1px solid #DCDFE6;
  box-sizing: border-box;
}

.h-flow-list-selector-header {
  background: #F0F2F5;
  padding: 5px;
}

.f-flow-list-selector:hover {
  background: #F5F7FA;
}

.f-flow-list-selector {
  padding-left: 5px;
  user-select: none;
  cursor: pointer;
}

.f-flow-list-selected {
  background: #1890ff;
  color: white
}

.f-flow-list-selected:hover {
  background: #1890ff;
  color: white
}

.f-flow-list-blur:hover,
.f-flow-list-blur {
  background: #D4D7DE;
}
</style>